<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>2048</title>
  <style>
    :root {
      --gridArea: 107px;
      --gap: 15px;
      --rowPos1: calc(var(--gridArea) + var(--gap));
      --rowPos2: calc(var(--gridArea) * 2 + var(--gap) * 2);
      --rowPos3: calc(var(--gridArea) * 3 + var(--gap) * 3);

      --colPos1:  calc(var(--gridArea) + var(--gap));
      --colPos2:  calc(var(--gridArea) * 2 + var(--gap) * 2);
      --colPos3:  calc(var(--gridArea) * 3 + var(--gap) * 3);
    }
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .container {
      width: 500px;
      margin: 0 auto;
      background-color: rgb(187, 173, 160);
      position: relative;
      padding: var(--gap);
      border-radius: 15px;
    }
    .game-container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr 1fr;
      gap: var(--gap);
    }
    .game-grid {
      width: var(--gridArea);
      height: var(--gridArea);
      background-color: rgba(121, 104, 90, 0.5);
      border-radius: 5px;
    }
    .title-container {
      position: absolute;
      top: var(--gap);
      left: var(--gap);
    }
    .title {
      position: absolute;
      width: 107px;
      height: 107px;
      background-color: antiquewhite;
      border-radius: 5px;
    }
    .title-position-0-0 {
      transform: translate(0, 0);
    }
    .title-position-0-1 {
      transform: translate(var(--colPos1), 0);
    }
    .title-position-0-2 {
      transform: translate(var(--colPos2), 0);
    }
    .title-position-0-3 {
      transform: translate(var(--colPos3), 0);
    }
    
    .title-position-1-0 {
      transform: translate(0, var(--rowPos1));
    }
    .title-position-1-1 {
      transform: translate( var(--colPos1), var(--rowPos1));
    }
    .title-position-1-2 {
      transform: translate( var(--colPos2), var(--rowPos1));
    }
    .title-position-1-3 {
      transform: translate( var(--colPos3), var(--rowPos1));
    }
    
    .title-position-2-0 {
      transform: translate(0, var(--rowPos2));
    }
    .title-position-2-1 {
      transform: translate( var(--colPos1), var(--rowPos2));
    }
    .title-position-2-2 {
      transform: translate( var(--colPos2), var(--rowPos2));
    }
    .title-position-2-3 {
      transform: translate( var(--colPos3), var(--rowPos2));
    }

    .title-position-3-0 {
      transform: translate(0, var(--rowPos3));
    }
    .title-position-3-1 {
      transform: translate( var(--colPos1), var(--rowPos3));
    }
    .title-position-3-2 {
      transform: translate( var(--colPos2), var(--rowPos3));
    }
    .title-position-3-3 {
      transform: translate( var(--colPos3), var(--rowPos3));
    }
    .text-inner {
      width: var(--gridArea);
      height: var(--gridArea);
      line-height: var(--gridArea);
      border-radius: 3px;
      background: #eee4da;
      text-align: center;
      font-weight: bold;
      z-index: 10;
      font-size: 55px;
    }
    .text-2 .text-inner {
      background: #eee4da;
      box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0);
    }
    .text-4 .text-inner {
      background: #ede0c8;
      box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0);
    }
    .text-8 .text-inner {
      color: #f9f6f2;
      background: #f2b179; 
    }
    .text-16 .text-inner {
      color: #f9f6f2;
      background: #f59563; 
    }
    .text-32 .text-inner {
      color: #f9f6f2;
      background: #f67c5f; 
    }
    .text-64 .text-inner {
      color: #f9f6f2;
      background: #f65e3b; 
    }
    .text-128 .text-inner {
      color: #f9f6f2;
      background: #edcf72;
      box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.2381), inset 0 0 0 1px rgba(255, 255, 255, 0.14286);
      font-size: 45px; 
    }
    .text-256 .text-inner {
      color: #f9f6f2;
      background: #edcc61;
      box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.31746), inset 0 0 0 1px rgba(255, 255, 255, 0.19048);
      font-size: 45px;
    }
    .text-512 .text-inner {
      color: #f9f6f2;
      background: #edc850;
      box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.39683), inset 0 0 0 1px rgba(255, 255, 255, 0.2381);
      font-size: 45px;
    }
    .text-1024 .text-inner {
      color: #f9f6f2;
      background: #edc53f;
      box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.47619), inset 0 0 0 1px rgba(255, 255, 255, 0.28571);
      font-size: 35px;
    }
    .text-2048 .text-inner {
      color: #f9f6f2;
      background: #edc22e;
      box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.55556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333);
      font-size: 35px; 
    }
  </style>
  <style>
    .title {
      transition: .5s ease-out;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="game-container">
      <div class="game-grid"></div>
      <div class="game-grid"></div>
      <div class="game-grid"></div>
      <div class="game-grid"></div>
      <div class="game-grid"></div>
      <div class="game-grid"></div>
      <div class="game-grid"></div>
      <div class="game-grid"></div>
      <div class="game-grid"></div>
      <div class="game-grid"></div>
      <div class="game-grid"></div>
      <div class="game-grid"></div>
      <div class="game-grid"></div>
      <div class="game-grid"></div>
      <div class="game-grid"></div>
      <div class="game-grid"></div>
    </div>
    <div class="title-container">
      <!--  -->
    </div>
  </div>
  <script src="./index.js"></script>
  <script >
    const titleContainer = document.querySelector('.title-container');
    function init() {
      const rows = matrix.length;
      const cols = matrix[0].length;
      const li = [];
      for(let i = 0; i < rows; i++) {
        for(let j = 0; j < cols; j++) {
          if (matrix[i][j] !== 0) {
            li.push({x: i, y: j, num: matrix[i][j]})
          }
        }
      }
      
      const frame = document.createDocumentFragment();
      for(let i = 0; i < li.length; i++) {
        const {x, y, num } = li[i]
        
        frame.appendChild(createdGrid(x, y, num))
      }
      titleContainer.appendChild(frame)
    }
    init()

    function createdGrid(x, y, num) {
      const el = document.createElement('div');
      el.classList.add('title', `text-${num}`, `title-position-${x}-${y}`)
      el.innerHTML = `<div class="text-inner">${num}</div>`
      return el
    }
    
    let repeatGrids = []

    function gridMove(direction) {
      if (repeatGrids.length > 0) {
        for(let i = 0; i < repeatGrids.length; i++) {
          const {x, y} = repeatGrids[i]
          const delEls = titleContainer.querySelectorAll(`.title-position-${x}-${y}`);
          delEls.forEach(el => {
            if (el.classList.contains('grid-merge')) {
              el.classList.remove('grid-merge')
            } else {
              titleContainer.removeChild(el)
            }
          });
        }
        repeatGrids = []
      }

      const actions = move(matrix, direction)
      console.log(actions)

      const targetArr = new Map()
      actions.forEach((value, key) => {
        const el = titleContainer.querySelector(`.title-position-${key}`)
        el.classList.replace(`title-position-${key}`, `title-position-${value.x}-${value.y}`)
        //
        if (!targetArr.has(`${value.x}-${value.y}`)) {
          targetArr.set(`${value.x}-${value.y}`, value)
        }
      });
      // console.log(targetArr)
      // 把位于同一位置的格子删除，并添加一个它们值相加的格子
      repeatGrids = [...targetArr.values()]
      if (repeatGrids.length > 0) {
        for(let i = 0; i < repeatGrids.length; i++) {
          const {x, y} = repeatGrids[i]
          let sumGrid = createdGrid(x, y, matrix[x][y]);
          sumGrid.classList.add('grid-merge')
          titleContainer.appendChild(sumGrid)
        }
      }
    }
   
    const direction = ['left', 'up', 'right', 'down']
    var map = {
      38: 1, // Up
      39: 2, // Right
      40: 3, // Down
      37: 0, // Left
      75: 0, // Vim up
      76: 1, // Vim right
      74: 2, // Vim down
      72: 3, // Vim left
      87: 0, // W
      68: 1, // D
      83: 2, // S
      65: 3  // A
    };

    document.addEventListener('keydown', (e) => {
      // console.log(direction[event.which])
      var mapped = direction[map[event.which]];
      if (mapped !== undefined) {
          event.preventDefault();
           gridMove(mapped)
        }
    })
  </script>
</body>
</html>